<!DOCTYPE html>
<html lang="zh-cn">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>htmlcss 阶段</title>
    <style>
        body {
            background-color: #000;
        }
        ul {
            list-style: none;
        }
        ul li {
            border-bottom: 1px solid #fff;
            color: #fff;
            padding: 10px 0 5px 0;
            font-size: 20px;
        }
    </style>
</head>
<body>
<!-- 列表标签 -->
<ul class="list">
    <!-- <li>xxx1</li> -->
</ul>

<script src="./lyric_data.js"></script>
<script>
    // 要求：
        // 定义匹配歌词的正则表达式
        // 把数组中的歌词解析，并渲染在页面
    // 思考：
        // 遇到数组，首先考虑的是索引值 以及循环
        // console.log(data[0]);
        // console.log(data[1]);
        // console.log(data[2]);
        // console.log(data[3]);
        // console.log(data[4]); // [00:14.360]像无尽绿色的仲夏　似月满那深秋
    
   
    // 1. 匹配歌词的正则表达式
    var regE01 = /\[(\d{2}):(\d{2})\.(\d{3})\](.+)/;

    // 2. 获取ul标签
    var ulElement = document.querySelector(".list");

    // 3. 字符串变量
    var str = "";

    // 测试
    // [00:14.360]像无尽绿色的仲夏　似月满那深秋
    // regE01.exec(data[4]);
    // regE01.exec("[00:14.360]像无尽绿色的仲夏　似月满那深秋");
    // console.log(RegExp.$1);// 00
    // console.log(RegExp.$2);// 14
    // console.log(RegExp.$3);// 360
    // console.log(RegExp.$4);// 像无尽绿色的仲夏　似月满那深秋

    // 4. 对data数组进行循环
    for(var i = 0 ; i < data.length ; i ++){
        // 匹配每一行歌词
        regE01.exec(data[i]);
        // 获取歌词
        var lyric = RegExp.$4;
        // 字符串拼接
        str += "<li>"+lyric+"</li>"
    }
    // 循环结束
    // 5. 渲染拼接完成的字符串
    ulElement.innerHTML = str;

    var regE02 = /\[()]/;
</script>
</body>
</html>